<template>
  <div class="404">
    <img :src="pay_code"/>
    404 页面找不到~
    <button @click="generate">generate</button>
    <div
      id="qrcode_wrap"
      style="width: 50px; height: 100px; position: relative"
    >
      <img
        style="width: 100%; height: 100%"
        src="https://pic.imgdb.cn/item/601827843ffa7d37b30d83f7.png"
      />
      <img
        style="
          width: 25px;
          height: 25px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        "
        :src="qrcode"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import QRCode from "qrcode";
import html2canvas from "html2canvas";

const qrcode = ref("");
const pay_code = ref("");
const generate = async () => {
  qrcode.value = await QRCode.toDataURL(
    `https://thinklink.thinkcar.cn/wechat/payconfirm`
  );
  
  const dom = document.querySelector("#qrcode_wrap") as HTMLElement;
  nextTick(async ()=>{
    const imgData = await html2canvas(dom, {
    useCORS: true,
    allowTaint: true,
    scale: 2
  });

  pay_code.value = imgData.toDataURL("image/jpeg", 1.0);
  })

 
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
